
<template>
  <div>

    <div v-show="OrderListVisible">
      <div  style="background-color: #f1f2f5; width: 100%; height: 1000px;">

      <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>
      <!--  带条件查询-->
      <div style="background-color: #fdfdfd; width: 1200px; height: 270px; margin: 0 auto;">
      <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
      <el-row style=" margin-top: 30px;">
        <span style="margin-right: 35px;">订单编号：</span>
        <el-input v-model="OrderDto.id" placeholder="请输入订单编号" :style="{ width: '200px', marginRight: '20px' }"></el-input>
        <span style="margin-left: 40px; margin-right: 40px;">订单状态：</span>
        <el-select v-model="OrderDto.status" placeholder="请选择" :style="{ width: '200px', marginRight: '20px' }">
          <el-option v-for="item in orderStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span style="margin-left: 35px; margin-right: 40px;">付费状态：</span>
        <el-select v-model="OrderDto.paymentStatus" placeholder="请选择" :style="{ width: '250px' }">
          <el-option v-for="item in orderpaymentStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-row>
    </div>
      <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
      <el-row>
        <span style="margin-right: 20px;">发件人姓名：</span>
        <el-input v-model="OrderDto.senderName" placeholder="请输入发件人姓名" :style="{ width: '200px', marginRight: '20px' }"></el-input>
        <span style="margin-left: 40px; margin-right: 20px;">发件人电话：</span>
        <el-input v-model="OrderDto.senderPhone" placeholder="请输入发件人电话" :style="{ width: '200px', marginRight: '20px' }"></el-input>
        <span style="margin-left: 40px; margin-right: 20px;">发件人地址：</span>
        <el-select v-model="OrderDto.senderProvinceId" placeholder="请选择省份" clearable @change="handleSenderProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
          <el-option v-for="province in senderprovinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
        </el-select>
        <el-select v-model="OrderDto.senderCityId" placeholder="请选择城市" clearable @change="handleSenderCityChange" :style="{ width: '70px', marginRight: '20px' }">
          <el-option v-for="city in sendercities" :key="city.id" :label="city.name" :value="city.id"></el-option>
        </el-select>
        <el-select v-model="OrderDto.senderDistrictId" placeholder="请选择区域" clearable :style="{ width: '70px' }">
          <el-option v-for="district in senderdistricts" :key="district.id" :label="district.name" :value="district.id"></el-option>
        </el-select>
      </el-row>
    </div>
      <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
      <el-row>
        <span style="margin-right: 20px;">收件人姓名：</span>
        <el-input v-model="OrderDto.receiverName" placeholder="请输入收件人姓名" :style="{ width: '200px' , marginRight: '20px'}"></el-input>
        <span style="margin-left: 40px; margin-right: 20px;">收件人电话：</span>
        <el-input v-model="OrderDto.receiverPhone" placeholder="请输入收件人电话" :style="{ width: '200px' , marginRight: '20px'}"></el-input>
        <span style="margin-left: 40px; margin-right: 20px;">收件人地址：</span>
        <el-select v-model="OrderDto.receiverProvinceId" placeholder="请选择省份" clearable @change="handleReceiverProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
          <el-option v-for="province in receiverprovinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
        </el-select>
        <el-select v-model="OrderDto.receiverCityId" placeholder="请选择城市" clearable @change="handleReceiverCityChange" :style="{ width: '70px', marginRight: '20px' }">
          <el-option v-for="city in receivercities" :key="city.id" :label="city.name" :value="city.id"></el-option>
        </el-select>
        <el-select v-model="OrderDto.receiverDistrictId" placeholder="请选择区域" clearable :style="{ width: '70px' }">
          <el-option v-for="district in receiverdistricts" :key="district.id" :label="district.name" :value="district.id"></el-option>
        </el-select>
      </el-row>
    </div>

    <div style="margin-left: 30px">
      <el-button style="margin-right: 20px; background-color: #df5536; width: 90px; color: white;" @click="ConditionalSearch" >搜索</el-button>
      <el-button style="width: 90px;">重置</el-button>
    </div>

  </div>

      <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

      <!--订单表格-->
      <div style="background-color: #fdfdfd; width: 1200px; height: 700px; margin-left: auto; margin-right: auto;">
        <!--表格-->
        <el-table
          :data="OrderList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          stripe
          height="620"
          style="width: 100%; display: inline-block; text-align: left;">
          <el-table-column
            prop="id"
            label="订单编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="pickupType"
            label="取件类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="transportId"
            label="运单编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
            width="180">
            <template v-slot="{ row }">
              {{ ConvertOrderStatusText(row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="senderName"
            label="发件人姓名"
            width="180">
          </el-table-column>

          <el-table-column
            prop="senderPhone"
            label="发件人电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="senderAddress"
            label="发件人详细地址"
            width="400">
          </el-table-column>

          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="180">
          </el-table-column>

          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="180">
          </el-table-column>
          <el-table-column
            prop="receiverAddress"
            label="收件人详细地址"
            width="400">
          </el-table-column>

          <el-table-column
            prop="paymentMethod"
            label="支付方式"
            width="180">
            <template v-slot="{ row }">
              {{ ConvertPaymentMethodsText(row.paymentMethod) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="paymentStatus"
            label="付款状态"
            width="180">
            <template v-slot="{ row }">
              {{ ConvertPaymentStatusText(row.paymentStatus) }}
            </template>
          </el-table-column>

<!--          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template v-slot="scope">

              <el-button type="text" size="small" @click="handleDetailClick(scope.row.id)" >查看详情</el-button>

            </template>
          </el-table-column>-->

          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="handleDetailOrEditClick(scope.row)">
                {{ scope.row.pickupType === 1 && !scope.row.transportId ? '编辑订单' : '查看详情' }}
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <!--分页-->
        <div class="block" style="margin: 0 auto; text-align: center;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="OrderList.length">
          </el-pagination>
        </div>

      </div>

      </div>
    </div>


    <div v-show="EditOrderInformation">
      <div  style="background-color: #f1f2f5; width: 100%; height: 1100px;">

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

        <div style="background-color: #fdfdfd; width: 1200px; height: 110px; margin: 0 auto;">

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 20px;">

              <span style=" font-size: 14px; margin-right: 15px;">订单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.id }}</span>

<!--
              <span style=" font-size: 14px; margin-right: 15px;">运单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.transportId }}</span>
-->

              <span style=" font-size: 14px; margin-right: 15px;">下单时间：</span>
              <span style=" font-size: 14px;  width: 200px; color: #bbbbbb; margin-right: 300px;">{{ OrderVo.createTime }}</span>

            </el-row>
          </div>

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 10px;">
              <span style=" font-size: 14px; margin-right: 15px;">订单状态：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 305px; color: #bbbbbb">{{ OrderVo.status | ConvertOrderStatus }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">预计到达时间：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.estimatedArrivalTime }}</span>

              <span style="padding-right: 210px;">&nbsp;</span>
            </el-row>
          </div>

        </div>

        <div style="background-color: #f1f2f5; width: 100%; height: 10px;"></div>

        <el-collapse v-model="activeNames" @change="handleChange" style="overflow: auto;">
            <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto; text-align: left;">
              <el-collapse-item name="1">
                <template slot="title">
                  <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">基本信息</span>
                </template>
                <div style=" margin-top: 20px;">
                  <span style="margin-left: 50px; font-size: 14px;">发货方</span>
                  <el-row style=" margin-top: 10px;">

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方姓名：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderName }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 90px;">发货方地址：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 150px; color: #bbbbbb">{{ OrderVo.senderProvinceName }} {{ OrderVo.senderCityName }} {{ OrderVo.senderCountyName }}</span>


                  </el-row>

                  <el-row style=" margin-top: 10px;">

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方电话：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderPhone }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderAddress }}</span>


                  </el-row>
                </div>

                <div style=" margin-top: 20px;">
                  <span style="margin-left: 50px; font-size: 14px;">收货方</span>
                  <el-row style=" margin-top: 10px;">

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方姓名：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverName }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 110px;">收货方地址：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverProvinceName }} {{ OrderVo.receiverCityName }} {{ OrderVo.receiverCountyName }}</span>


                  </el-row>

                  <el-row style=" margin-top: 10px;">

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方电话：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverPhone }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverAddress }}</span>


                  </el-row>
                </div>

                <div style=" margin-top: 20px;">
                  <span style="margin-left: 50px; font-size: 14px;">距离: </span>
                  <span style="margin-left: 20px; font-size: 14px; ">{{ OrderVo.distance }} km</span>

<!--                  <span style="margin-left: 100px; font-size: 14px;">地图: </span>
                  <el-button style="margin-left: 20px;" type="text" @click="ViewMapClickEvents">查看地图</el-button>

                  <el-dialog
                      title="地图查看"
                      :visible.sync="dialogVisible"
                      width="80%"
                      :before-close="handleClose">
&lt;!&ndash;                    <div style="background-color: #f1f2f5; height: 600px;"></div>&ndash;&gt;
                    <div>
                      <div id="container"></div>
                      <div id="panel"></div>
                    </div>

                  </el-dialog>-->
                </div>
              </el-collapse-item>
            </div>

            <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
              <el-collapse-item name="2">
                <template slot="title">
                  <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">费用信息</span>
                </template>
                <div>
                  <div style=" margin-top: 20px;">
                    <el-row style=" margin-top: 10px;">

                      <span style="margin-left: 50px; font-size: 14px; margin-right: 15px;">运费：</span>
                      <span style=" font-size: 16px; margin-right: 15px;width: 200px; font-weight: bold; color: #ffb902">{{this.Calculatedfreight}}</span>
                      <span style=" font-size: 14px; margin-right: 200px; color: #bbbbbb">元</span>

<!--
                      <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">支付方式：</span>
                      <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.paymentMethod | ConvertPaymentMethods }}</span>
-->

                      <span style="font-size: 14px; margin-right: 15px; margin-left: 80px;">支付方式：</span>
                      <el-select v-model="OrderVo.paymentMethod" placeholder="请选择支付方式" style="width: 200px">
                        <el-option
                          v-for="method in paymentMethodList"
                          :key="method.value"
                          :label="method.label"
                          :value="method.value">
                        </el-option>
                      </el-select>


                      <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">付款状态：</span>
                      <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.paymentStatus | ConvertPaymentStatus}}</span>
                    </el-row>

                  </div>


                </div>

              </el-collapse-item>
            </div>

            <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
              <el-collapse-item name="3">
                <template slot="title">
                  <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">货品信息</span>
                </template>
                <div style="margin-left: 50px; width: 1100px; display: inline-block; text-align: left;">
                  <el-table
                      :data="CargoList"
                      height="200"
                      stripe
                      style="width: 100%;">

                    <el-table-column
                        prop="name"
                        label="货物名称"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.name }}</span>
                        <el-input v-else v-model="scope.row.name" placeholder="请输入货物名称"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="quantity"
                        label="货品数量"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.quantity }}</span>
                        <el-input v-else v-model="scope.row.quantity" placeholder="请输入货物数量"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="goodsTypeId"
                        label="货物类型ID"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.goodsTypeId }}</span>
                        <el-select v-else clearable v-model="scope.row.goodsTypeId" placeholder="请选择货物类型">
                          <el-option
                            v-for="item in goodsTypeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="weight"
                        label="货品重量"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.weight }}</span>
                        <el-input v-else v-model="scope.row.weight" placeholder="请输入货品重量"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="volume"
                        label="货品体积"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.volume }}</span>
                        <el-input v-else v-model="scope.row.volume" placeholder="请输入货品体积"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="totalWeight"
                        label="货品总重量"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.totalWeight }}</span>
                        <el-input v-else v-model="scope.row.totalWeight" placeholder="请输入货品总重量"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="totalVolume"
                        label="货品总体积"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.totalVolume }}</span>
                        <el-input v-else v-model="scope.row.totalVolume" placeholder="请输入货品总体积"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="cargoBarcode"
                        label="货品条码"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.cargoBarcode }}</span>
                        <el-input v-else v-model="scope.row.cargoBarcode" placeholder="请输入货品条码"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="货品备注"
                        width="180">
                      <template slot-scope="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.remark }}</span>
                        <el-input v-else v-model="scope.row.remark" placeholder="请输入货品备注"></el-input>
                      </template>
                    </el-table-column>



                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="120">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleEdit(scope.row)">
                          {{ scope.row.editing ? '保存' : '编辑' }}
                        </el-button>
                        <el-button v-if="scope.row.editing && !scope.row.isEmptyRow && scope.$index !== CargoList.length - 1" type="text" size="mini" @click="handleCancelEdit(scope.row)">
                          取消
                        </el-button>
                        <el-button v-if="!scope.row.isEmptyRow && scope.$index !== CargoList.length - 1" type="text" size="mini" @click="handleDelete(scope.row)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>


                  </el-table>
                </div>
              </el-collapse-item>
            </div>


        </el-collapse>
        <div style="display: flex; justify-content: center; margin-top: 10px;">
          <el-button style="width: 100px;" @click="SaveOrderEditing">保存</el-button>
          <el-button style="width: 100px;" @click="HideEditOrderDIV">取消</el-button>
        </div>

      </div>
    </div>

    <div v-show="OrderDetailsVisible">
      <div  style="background-color: #f1f2f5; width: 100%; height: 1600px;">

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

        <div style="background-color: #fdfdfd; width: 1200px; height: 110px; margin: 0 auto;">

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 20px;">

              <span style=" font-size: 14px; margin-right: 15px;">订单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.id }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">运单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.transportId }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">下单时间：</span>
              <span style=" font-size: 14px;  width: 200px; color: #bbbbbb; margin-right: 300px;">{{ OrderVo.createTime }}</span>

            </el-row>
          </div>

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 10px;">
              <span style=" font-size: 14px; margin-right: 15px;">订单状态：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 305px; color: #bbbbbb">{{ OrderVo.status | ConvertOrderStatus }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">预计到达时间：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.estimatedArrivalTime }}</span>

              <span style="padding-right: 210px;">&nbsp;</span>
            </el-row>
          </div>

        </div>

        <div style="background-color: #f1f2f5; width: 100%; height: 10px;"></div>

        <el-collapse v-model="activeNames" @change="handleChange" style="overflow: auto;">
          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto; text-align: left;">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">基本信息</span>
              </template>
              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">发货方</span>
                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方姓名：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderName }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 90px;">发货方地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 150px; color: #bbbbbb">{{ OrderVo.senderProvinceName }} {{ OrderVo.senderCityName }} {{ OrderVo.senderCountyName }}</span>


                </el-row>

                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方电话：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderPhone }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.senderAddress }}</span>


                </el-row>
              </div>

              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">收货方</span>
                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方姓名：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverName }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 110px;">收货方地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverProvinceName }} {{ OrderVo.receiverCityName }} {{ OrderVo.receiverCountyName }}</span>


                </el-row>

                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方电话：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverPhone }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.receiverAddress }}</span>


                </el-row>
              </div>

              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">距离: </span>
                <span style="margin-left: 20px; font-size: 14px; ">{{ OrderVo.distance }} km</span>

                <span style="margin-left: 100px; font-size: 14px;">地图: </span>
                <el-button style="margin-left: 20px;" type="text" @click="ViewMapClickEvents">查看地图</el-button>

                <el-dialog
                  title="地图查看"
                  :visible.sync="dialogVisible"
                  width="80%"
                  :before-close="handleClose">
                  <!--                    <div style="background-color: #f1f2f5; height: 600px;"></div>-->
                  <div>
                    <div id="container"></div>
                    <div id="panel"></div>
                  </div>

                </el-dialog>
              </div>
            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="2">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">费用信息</span>
              </template>
              <div>
                <div style=" margin-top: 20px;">
                  <el-row style=" margin-top: 10px;">

                    <span style="margin-left: 50px; font-size: 14px; margin-right: 15px;">运费：</span>
                    <span style=" font-size: 16px; margin-right: 15px;width: 200px; font-weight: bold; color: #ffb902">{{OrderVo.amount}}</span>
                    <span style=" font-size: 14px; margin-right: 200px; color: #bbbbbb">元</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">支付方式：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.paymentMethod | ConvertPaymentMethods }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">付款状态：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ OrderVo.paymentStatus | ConvertPaymentStatus}}</span>
                  </el-row>

                </div>


              </div>

            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="3">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">货品信息</span>
              </template>
              <div style="margin-left: 50px; width: 1100px; display: inline-block; text-align: left;">
                <el-table
                  :data="CargoList"
                  height="200"
                  stripe
                  style="width: 100%;">
                  <el-table-column
                    prop="name"
                    label="货物名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="quantity"
                    label="货品数量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="goodsTypeId"
                    label="货物类型ID"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="weight"
                    label="货品重量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="volume"
                    label="货品体积"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="totalWeight"
                    label="货品总重量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="totalVolume"
                    label="货品总体积"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="cargoBarcode"
                    label="货品条码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="货品备注"
                    width="180">
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="4">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">取件信息</span>
              </template>
              <div>
                <div style=" margin-top: 20px;">
                  <el-row style="margin-left: 50px; margin-top: 10px;">

                    <span style=" font-size: 14px;">所在网点：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">新惠镇网点</span>


                    <span style=" font-size: 14px; margin-left: 30px;">取件类型：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">预结</span>

                  </el-row>

                </div>
              </div>

            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="5">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">运输信息</span>
              </template>
              <div>
                <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
                  <el-button style="margin-left: 100px; padding: 10px 20px; line-height: 30px;" circle >
                    <span style="font-size: 20px; font-weight: bold;">1</span>
                  </el-button>
                  <div style="flex: 1; margin: 0 5px;"><hr style="border: none; border-top: 1px dashed #000;"></div>
                  <el-button style="padding: 10px 20px; line-height: 30px;" circle >
                    <span style="font-size: 20px; font-weight: bold;">2</span>
                  </el-button>
                  <div style="flex: 1; margin: 0 5px;"><hr style="border: none; border-top: 1px dashed #000;"></div>
                  <el-button style="padding: 10px 20px; line-height: 30px;" circle >
                    <span style="font-size: 20px; font-weight: bold;">3</span>
                  </el-button>
                  <div style="flex: 1; margin: 0 5px;"><hr style="border: none; border-top: 1px dashed #000;"></div>
                  <el-button style="padding: 10px 20px; line-height: 30px;" circle >
                    <span style="font-size: 20px; font-weight: bold;">4</span>
                  </el-button>
                  <div style="flex: 1; margin: 0 5px;"><hr style="border: none; border-top: 1px dashed #000;"></div>
                  <el-button style="margin-right: 100px; padding: 10px 20px; line-height: 30px;" circle >
                    <span style="font-size: 20px; font-weight: bold;">5</span>
                  </el-button>
                </div>

                <!--                <div style=" margin-top: 20px;">
                                  <el-row style="margin-left: 50px; margin-top: 10px;">

                                    <el-button style="margin-right: 100px;" circle size="medium">1</el-button>
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-truck" circle size="medium"></el-button>&ndash;&gt;
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-check" circle size="medium"></el-button>&ndash;&gt;


                                    <el-button style="margin-right: 100px;" circle size="medium">2</el-button>
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-truck" circle size="medium"></el-button>&ndash;&gt;
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-check" circle size="medium"></el-button>&ndash;&gt;


                                    <el-button style="margin-right: 100px;" circle size="medium">3</el-button>
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-truck" circle size="medium"></el-button>&ndash;&gt;
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-check" circle size="medium"></el-button>&ndash;&gt;


                                    <el-button style="margin-right: 100px;" circle size="medium">4</el-button>
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-truck" circle size="medium"></el-button>&ndash;&gt;
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-check" circle size="medium"></el-button>&ndash;&gt;


                                    <el-button style="margin-right: 100px;" circle size="medium">5</el-button>
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-truck" circle size="medium"></el-button>&ndash;&gt;
                &lt;!&ndash;                    <el-button style="margin-right: 100px;" icon="el-icon-check" circle size="medium"></el-button>&ndash;&gt;

                                  </el-row>

                                </div-->
              </div>

            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="6">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">派送信息</span>
              </template>
              <div>
                <div style=" margin-top: 20px;">
                  <el-row style="margin-left: 50px; margin-top: 10px;">

                    <span style=" font-size: 14px;">所在网点：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">新惠镇网点</span>


                    <span style=" font-size: 14px; margin-left: 30px;">取件类型：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">预结</span>

                    <span style=" font-size: 14px;margin-left: 30px;">作业状态：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">未付款</span>

                    <span style=" font-size: 14px;margin-left: 30px;">取件快递员：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 230px; color: #bbbbbb">未付款</span>
                  </el-row>

                  <el-row style="margin-left: 50px; margin-top: 10px;">

                    <span style=" font-size: 14px;" >快递员电话：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">12000000004</span>

                    <span style=" font-size: 14px; margin-left: 30px;">预计取件时间：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">2021-12-09 18:50:57</span>

                    <span style=" font-size: 14px; margin-left: 30px;">取件完成时间：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 210px; color: #bbbbbb">2021-12-09 18:50:57</span>

                  </el-row>
                </div>
              </div>

            </el-collapse-item>
          </div>

        </el-collapse>

        <el-button style="display: block; margin: 20px auto 0; width: 100px;" @click="HideOrderDetailsDIV">返回</el-button>

      </div>
    </div>


  </div>
</template>

<script>
import user from  '@/store/modules/user'
// 添加高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "e20a12abcb1fab184da9574c7eaee0b9"
};
import {
  CalculateFreightChargesForGoods,
  CheckTheOrderBasedOnTheId,
  handleAllProvinces,
  handleCityChange,
  handleProvinceChange,
  QueryOrderDataWithConditions, updateOrderInfo
} from "../../api/order/order";

export default {

  data() {
    return {
      Calculatedfreight: '',//计算后运费
      dialogVisible: false,//查看地图弹框
      EditOrderInformation: false,//编辑订单信息div
      OrderDetailsVisible: false,//订单详情div
      OrderListVisible: true,//订单列表div
      activeNames: ['1', '2', '3', '4','5','6'],//订单详情信息折叠板
      pageSize: 10,//每页显示最大条数
      currentPage: 1,//当前页数
      OrderList: [],//订单信息集合
      CargoList: [],//货品信息集合
      goodsTypeOptions: [//货品类型集合
        {
          id: '0001',
          name: '电器'
        }, {
          id: '0002',
          name: '水果'
        }, {
          id: '0003',
          name: '厨具'
        }, {
          id: '0004',
          name: '家具'
        }, {
          id: '0005',
          name: '家电'
        }, {
          id: '0006',
          name: '电竞外设'
        }, {
          id: '0007',
          name: '服饰'
        }, {
          id: '0008',
          name: '首饰'
        }, {
          id: '0009',
          name: '生活用品'
        }, {
          id: '00010',
          name: '化妆用品'
        }],//货品类型
      emptyRow: {
        name: '',
        quantity: '',
        goodsTypeId: '',
        weight: '', volume: '',
        totalWeight: '',
        totalVolume: '',
        cargoBarcode: '',
        remark: '',
        editing: true
      },//货品添加列
      /*originalCargoList : [
        {
          id: '1',
          name: '商品1',
          quantity: 10,
          goodsTypeId: 1,
          weight: 5,
          volume: 10,
          totalWeight: 50,
          totalVolume: 100,
          cargoBarcode: 'ABC123',
          remark: '这是商品1的备注',
          editing: false
        },
        {
          name: '商品2',
          quantity: 20,
          goodsTypeId: 2,
          weight: 8,
          volume: 15,
          totalWeight: 160,
          totalVolume: 300,
          cargoBarcode: 'DEF456',
          remark: '这是商品2的备注',
          editing: false
        },
        {
          name: '商品3',
          quantity: 15,
          goodsTypeId: 3,
          weight: 6,
          volume: 12,
          totalWeight: 90,
          totalVolume: 180,
          cargoBarcode: 'GHI789',
          remark: '这是商品3的备注',
          editing: false
        }
      ],//初始货品信息*/
      originalCargoList : [],//初始货品信息

      senderprovinces: [],//发件人省份下拉框
      sendercities: [],//发件人城市下拉框
      senderdistricts: [],//发件人区县下拉框

      receiverprovinces: [],//收件人省份下拉框
      receivercities: [],//收件人城市下拉框
      receiverdistricts: [],//收件人区县下拉框

      orderStatus: [
        {
          value: '1',
          label: '待取件'
        }, {
          value: '2',
          label: '已取件'
        }, {
          value: '3',
          label: '网点自寄'
        }, {
          value: '4',
          label: '网点入库'
        }, {
          value: '5',
          label: '待装车'
        }, {
          value: '6',
          label: '运输中'
        }, {
          value: '7',
          label: '网点出库'
        }, {
          value: '8',
          label: '待派送'
        }, {
          value: '9',
          label: '派送中'
        }, {
          value: '10',
          label: '签收'
        }, {
          value: '11',
          label: '拒收'
        }, {
          value: '12',
          label: '已取消'
        }],//订单状态下拉框
      paymentMethodList: [
        {
          value: 1,
          label: '预结'
        }, {
          value: 2,
          label: '到付'
        }
      ],//付款方式列表
      orderpaymentStatus: [
        {
          value: '1',
          label: '未付'
        }, {
          value: '2',
          label: '已付'
        }],//订单付费状态下拉框

      OrderDto: {//订单查询条件
        id: '',//订单id查询条件
        currentAgencyId: '',//当前所在网点id
        status : '',//订单状态查询条件
        paymentStatus: '',//付费状态查询条件
        senderName: '',//发件人姓名查询条件
        senderPhone: '',//发件人电话查询条件
        senderProvinceId: '',//发件人省份查询条件
        senderCityId: '',//发件人城市查询条件
        senderDistrictId: '',//发件人区县查询条件
        receiverName: '',//收件人姓名查询条件
        receiverPhone: '',//收件人电话查询条件
        receiverProvinceId: '',//收件人省份查询条件
        receiverCityId: '',//收件人城市查询条件
        receiverDistrictId: '',//收件人区县查询条件
      },
      OrderVo:{
          id: '',// 订单编号
          orderType: 0,//订单类型，1为同城订单，2为城际订单
          transportId: '',//运单编号
          createTime: '',// 下单时间
          status: 0,// 订单状态
          estimatedArrivalTime: '',// 预计到达时间
          senderName: '',// 发货方姓名
          senderProvinceId: '',// 发货方省份id
          senderProvinceName: '',// 发货方省份名称
          senderCityId: '',// 发货方城市id
          senderCityName: '',// 发货方城市名称
          senderCountyId: '',// 发货方区县id
          senderCountyName: '',// 发货方区县名称
          senderPhone: '',// 发货方电话
          senderAddress: '',// 发货方详细地址
          receiverName: '',// 收件方姓名
          receiverProvinceId: '',// 收件方省份id
          receiverProvinceName: '',// 收件方省份名称
          receiverCityId: '',// 收件方城市id
          receiverCityName: '',// 收件方城市名称
          receiverCountyId: '',// 收件方区县id
          receiverCountyName: '',// 收件方区县名称
          receiverPhone: '',// 收件方电话
          receiverAddress: '',// 收件方详细地址
          distance: 0,//距离
          amount: 0,// 运费
          paymentMethod: 0,// 支付方式
          paymentStatus: 0,// 付款状态
          orderCargo: [],// 货品信息
          totalQuantityOfOrderedGoods: 0,//订单货品总数量
          currentAgencyId: '',// 当前所在网点
          pickupType: 0//取件类型，1为同城订单，2为城际订单
      }

    }
  },

  filters: {

    //转换付款方式
    ConvertPaymentMethods(value) {
      switch (value) {
        case 1:
          return '预结';
        case 2:
          return '到付';
        default:
          return '其他';
      }
    },
    //转换付款状态
    ConvertPaymentStatus(value) {
      switch (value) {
        case 1:
          return '未付';
        case 2:
          return '已付';
        default:
          return '其他';
      }
    },
    //转换订单状态
    ConvertOrderStatus(value) {
      switch (value) {
        case 1:
          return '待取件';
        case 2:
          return '已取件';
        case 3:
          return '网点自寄';
        case 4:
          return '网点入库';
        case 5:
          return '待装车';
        case 6:
          return '运输中';
        case 7:
          return '网点出库';
        case 8:
          return '待派送';
        case 9:
          return '派送中';
        case 10:
          return '签收';
        case 11:
          return '拒收';
        case 12:
          return '已取消';
        default:
          return '其他状态';
      }
    }
  },
  methods: {
    //订单货品编辑按钮
    handleEdit(row) {
      console.log('当前行数据：', row);

      if (!row.editing) {
        // 保存原始数据
        row.originalData = { ...row }; // 使用扩展运算符创建原始数据的副本
        row.editing = true; // 进入编辑模式
      } else {

        this.saveRowData(row); // 保存货品修改

        row.editing = false;// 退出编辑模式
        delete row.originalData; // 清除原始数据
      }
    },
    // 保存货品修改
    saveRowData(row) {
      this.OrderVo.orderCargo=this.CargoList
      console.log(this.OrderVo);

      CalculateFreightChargesForGoods(this.OrderVo).then(response =>{
        this.Calculatedfreight=response.amount

        console.log(this.Calculatedfreight);
      })
      // 判断当前行是否为最后一行
      const lastIndex = this.CargoList.length - 1;
      if (row === this.CargoList[lastIndex]) {
        this.addNewEmptyRow(); // 在表格中添加一行新的空数据
      }
    },
    addNewEmptyRow() {
      const emptyRow = { name: '', quantity: '', goodsTypeId: '', weight: '', volume: '', totalWeight: '', totalVolume: '', cargoBarcode: '', remark: '', editing: true };
      this.CargoList.push(emptyRow); // 将空数据添加到表格数据中
    },

    //订单货品取消编辑按钮
    handleCancelEdit(row) {
      if (row.editing) {
        if (row.originalData) {
          // 将原始数据恢复到当前行
          Object.assign(row, row.originalData);
          delete row.originalData; // 清除原始数据
        }
        row.editing = false; // 取消编辑，退出编辑模式
      }
    },
    //订单删除货品
    handleDelete(row) {
      const index = this.CargoList.indexOf(row);
      if (index !== -1) {
        this.CargoList.splice(index, 1); // 从数据列表中删除该行数据
      }
    },
    initMap() {

      console.log('initMap 方法被调用');
      if (typeof AMap === 'undefined') {
        console.error('高德地图API未加载');
        return;
      }

      const map = new AMap.Map("container", {
        resizeEnable: false,
        center: [116.397428, 39.90923],
        zoom: 13
      });

      const receiverAddress = this.OrderVo.receiverAddress;
      const receiverCityName = this.OrderVo.receiverCityName;

      const senderAddress = this.OrderVo.senderAddress;
      const senderCityName = this.OrderVo.senderCityName;

      AMap.plugin(['AMap.Driving'], function() {
        const driving = new AMap.Driving({
          map: map,
          panel: 'panel'
        });

        driving.search([
          { keyword: senderAddress, city: senderCityName },
          { keyword: receiverAddress, city: receiverCityName }

        ], function(status, result) {
          if (status === 'complete') {
            console.log('绘制驾车路线完成');
          } else {
            console.error('获取驾车数据失败：' + result);
          }
        });
      });
    },
    remoteLoad(url, callback) {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;

      if (script.readyState) {  // For IE
        script.onreadystatechange = function() {
          if (script.readyState === 'loaded' || script.readyState === 'complete') {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // For other browsers
        script.onload = function() {
          callback();
        };
      }

      document.body.appendChild(script);
    },
    //转换付款方式
    ConvertPaymentMethodsText(value) {
      switch (value) {
        case 1:
          return '预结';
        case 2:
          return '到付';
        default:
          return '其他';
      }
    },
    //转换付款状态
    ConvertPaymentStatusText(value) {
      switch (value) {
        case 1:
          return '未付';
        case 2:
          return '已付';
        default:
          return '其他';
      }
    },
    //转换订单状态
    ConvertOrderStatusText(value) {
      switch (value) {
        case 1:
          return '待取件';
        case 2:
          return '已取件';
        case 3:
          return '网点自寄';
        case 4:
          return '网点入库';
        case 5:
          return '待装车';
        case 6:
          return '运输中';
        case 7:
          return '网点出库';
        case 8:
          return '待派送';
        case 9:
          return '派送中';
        case 10:
          return '签收';
        case 11:
          return '拒收';
        case 12:
          return '已取消';
        default:
          return '其他状态';
      }
    },
    //最大页数监听事件
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    //当前页监听事件
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`);
    },
    //搜索点击事件
    ConditionalSearch(){
      QueryOrderDataWithConditions(this.OrderDto).then(response =>{
        this.OrderList = response;
      })
    },

    handleChange(val) {
      console.log("折叠板========"+val);
    },
    //保存订单编辑点击事件
    SaveOrderEditing(){

      // 使用pop方法移除CargoList数组中的最后一个货品数据
      this.CargoList.pop();
      this.OrderVo.orderCargo=this.CargoList
      // 打印移除后的CargoList，你也可以在这里做其他操作
      console.log(this.OrderVo);
      updateOrderInfo(this.OrderVo);
      this.HideEditOrderDIV();
    },
    //隐藏订单详情显示订单列表
    HideOrderDetailsDIV() {

      this.OrderDetailsVisible = false;
      this.OrderListVisible = true;
    },
    //隐藏编辑订单详情显示订单列表
    HideEditOrderDIV() {
      this.EditOrderInformation = false;
      this.OrderListVisible = true;
    },
    handleDetailOrEditClick(row) {
      if (row.pickupType === 1 && !row.transportId) {
        this.OrderListVisible = false;
        this.EditOrderInformation = true;
        this.handleDetailClick(row.id);

      } else {
        this.OrderListVisible = false;
        this.OrderDetailsVisible = true;
        this.handleDetailClick(row.id);
      }
    },
    //根据订单id查订单详情方法
    async handleDetailClick(id) {
      console.log("点击了查看详情按钮，当前行的id为：" + id);
      //根据订单id查订单详情js接口
      CheckTheOrderBasedOnTheId(id).then(response =>{
        this.OrderVo = response

        //转换需要转换的属性
        this.OrderVo.amount=Number(response.amount);
        this.OrderVo.distance=Number(response.distance);
        this.OrderVo.orderType = parseInt(response.orderType);
        this.OrderVo.status = parseInt(response.status);
        this.OrderVo.paymentMethod = parseInt(response.paymentMethod);
        this.OrderVo.paymentStatus = parseInt(response.paymentStatus);
        this.OrderVo.totalQuantityOfOrderedGoods = parseInt(response.totalQuantityOfOrderedGoods);
        this.OrderVo.pickupType = parseInt(response.pickupType);
        this.OrderVo.createTime = response.createTime;
        this.OrderVo.estimatedArrivalTime = response.estimatedArrivalTime;
        this.OrderVo.orderCargo=response.orderCargo;

        this.Calculatedfreight=Number(response.amount);
        this.originalCargoList = response.orderCargo

        this.CargoList = [...this.originalCargoList, this.emptyRow];

        console.log(response.amount);
        console.log(response.distance);

      })

    },
    //查看地图点击事件
    ViewMapClickEvents(){
      // Define the initMap callback function before loading JsApi
      window.initMap = () => {
        this.initMap(); // Call the initMap method when JsApi is loaded
      };

      // Call the remoteLoad function here
      this.remoteLoad('https://webapi.amap.com/maps?v=1.4.15&key=0c069d624168ea56415191392161489c&callback=initMap', () => {
        // Callback function after script is loaded
        console.log('高德地图API加载完成');
      });
      this.dialogVisible = true;
    },
    handleClose() {//关闭查看地图方法
      this.dialogVisible = false; // 关闭对话框

/*      this.$confirm('确认关闭？')
          .then(() => {
            // 在这里执行关闭对话框的操作
          })
          .catch(() => {
            // 用户取消关闭操作时的处理
          });*/
    },
    //查询发件人城市
    async handleSenderProvinceChange(value) {

      if (!value) {
        this.OrderDto.senderCityId = '';
        this.OrderDto.senderDistrictId = '';
        this.senderdistricts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.sendercities = response
      })
    },
    //查询发件人区县
    async handleSenderCityChange(value) {
      if (!value) {
        this.OrderDto.senderDistrictId = '';
        this.senderdistricts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.senderdistricts = response
      })
    },
    //查询收件人城市
    async handleReceiverProvinceChange(value) {
      if (!value) {
        this.OrderDto.receiverCityId = '';
        this.OrderDto.receiverDistrictId = '';
        this.receiverdistricts=[];
      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.receivercities = response
        console.log("收件人城市====" + response);
      })
    },
    //查询收件人区县
    async handleReceiverCityChange(value) {
      if (!value) {
        this.OrderDto.receiverDistrictId = '';
        this.receiverdistricts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.receiverdistricts = response
        console.log("收件人区县====" + response);
      })
    }
  },


  async created() {
    //this.CargoList = [...this.originalCargoList, this.emptyRow];初始订单列表，加上空行


    //查询所有省份
    handleAllProvinces().then(response =>{
      this.receiverprovinces = response;
      this.senderprovinces = response;
    })
    this.OrderDto.currentAgencyId=user.state.orgId

    console.log(this.OrderDto);


    //查询所有订单信息
    QueryOrderDataWithConditions(this.OrderDto).then(response =>{
      this.OrderList = response;
    })

  }

};
</script>


<style>

</style>



<style scoped>
#container {
  height: 600px; /* 设置地图容器的高度 */
  width: 100%; /* 设置地图容器的宽度 */
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 140px;
  right: 10px;
  width: 280px;
  height: 600px;

}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>



